﻿@{
    ViewBag.Title = "TemplateMethod";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .comic {
        float:left;
        width:200px;
        background:#000000;
        padding:10px;
        min-height:450px;
        color: #00BB00;
    }
    .comic img {
        border:1px solid blue;
    }
    .comic h3 {
        font-size:24px;
    }
</style>

<h2>Template Method</h2>
<div id="main"> </div>
<script type="text/javascript">
    $(document).ready(function () {
        // data
        var comics = [
            {
                imgSrc: "/Images/cover1.jpg",
                title: "Captain Templates",
                year: "2010",
                number: "1"
            },
            {
                imgSrc: "/Images/cover2.jpg",
                title: "Captain Templates",
                year: "2011",
                number: "2"
            },
            {
                imgSrc: "/Images/cat.jpg",
                title: "Master HaKu&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
                year: "2013",
                number: "3"
            }
        ];

        //jquery template append
        var tempHtml = '<div class="comic"><img src="${imgSrc}" /><div class="details">'
            + '<div class="title"><h3>${title}</h3></div><div class="year">${year}</div>'
            + '<div class="number">${number}</div></div></div>';
        $.template('comics', tempHtml);
        $.tmpl("comics", comics).appendTo("#main");
    });
</script>



